<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-tag-header">
      <span>热门采购产品</span>
      <a @click="moreProducts" class="me-pull-right me-tag-more">查看全部</a>
    </div>
    <image-carousel :images="images" :show-size="4" :auto-slide="true" style="width:600px"/>
  </el-card>
</template>

<script>
import ImageCarousel from "../ImageCarousel.vue";

export default {
  name: "CardProductImage",
  components: {
    "image-carousel": ImageCarousel,
  },
  props: {
    images: Array,
  },
  data() {
    return {};
  },
  methods: {
    moreProducts() {
      this.$router.push("/tag/all");
    },
    tag(id) {
      this.$router.push({ path: `/tag/${id}` });
    },
  },
};
</script>

<style scoped>
.me-tag-header {
  font-weight: 600;
}

.me-tag-more {
  font-size: 14px;
  color: #78b6f7;
  position: relative;
}

/* .me-tag-list {
  list-style-type: none;
}

.me-tag-item {
  position: relative;
  display: inline-block;
  padding: 4px;
  font-size: 14px;
  color: #5fb878;
}

.me-tag-item a:hover {
  text-decoration: underline;
} */
</style>
